<template>
  <div>
    <el-dialog
      :title="this.$t('ExpressCargoManagementLang.SignStorage')"
      :visible.sync="Visible"
      width="600px"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <div class="dialogBox top">
          <div class="dialogBoxItem">
            <div style="width:49%;" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressCargoManagementLang.weight')}}:
              </div>
              <div class="contant">
                <el-input-number
                  controls-position="right"
                  size="small" 
                  :min="0"  
                  :precision="2"
                  v-model="data.gross_weight">
                </el-input-number>
              </div>
            </div>
            <div style="width:49%;" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressCargoManagementLang.volume')}}:
              </div>
              <div class="contant">
                <el-input-number
                  controls-position="right"
                  size="small" 
                  @change="handleChange('volume')" 
                  :min="0"  
                  :precision="5"
                  v-model="data.volume">
                </el-input-number>
              </div>
            </div>
          </div>
          <div class="dialogBoxItem">
            <div style="width:32%;" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressCargoManagementLang.Length')}}:
              </div>
              <div class="contant">
                <el-input-number
                  controls-position="right"
                  size="small" 
                  @change="handleChange('length')" 
                  :min="0"  
                  :precision="0"
                  v-model="data.length">
                </el-input-number>
              </div>
            </div>
            <div style="width:32%;" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressCargoManagementLang.Width')}}:
              </div>
              <div class="contant">
                <el-input-number
                  controls-position="right"
                  size="small" 
                  @change="handleChange('width')" 
                  :min="0"  
                  :precision="0"
                  v-model="data.width">
                </el-input-number>
              </div>
            </div>
            <div style="width:32%;" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressCargoManagementLang.Height')}}:
              </div>
              <div class="contant">
                <el-input-number
                  controls-position="right"
                  size="small" 
                  @change="handleChange('height')" 
                  :min="0"  
                  :precision="0"
                  v-model="data.height">
                </el-input-number>
              </div>
            </div>
          </div>
          <div style="display:flex; margin-bottom: 5px;gap:10px">
            <div style="cursor: pointer;display: flex;align-items: center;gap:5px" @click="addItem('goods')">
              <img style="width:12px;height:12px;" src="../../../assets/img/add.png" alt="">
              <span>{{$t('common.Add')}}</span>
            </div>
            <div style="cursor: pointer;display: flex;align-items: center;gap:5px" @click="delItem('goods')">
              <img style="width:12px;height:12px;" src="../../../assets/img/del.png" alt="">
              <span>{{$t('common.del')}}</span>
            </div>
          </div>
          <MyTable
          :tableColumn="tableColumn_goods"
          :tableData="tableData_goods"
          :isOrder="false"
          @sendCurrentData="setCurrent_goods"
          @sendTabClick="setTabClick"
          >
            <template v-slot:content="scope">
              <span v-if="scope.row.index === tabClickIndex && tabClickLabel === scope.config.label">
                <el-input-number v-fo v-noFocu v-if="scope.config.templateType=='InputNumber'"
                  v-model="scope.row[scope.config.prop]" controls-position="right" :min="0" :precision="2" @blur="inputBlur(scope.row,scope.config.prop)"></el-input-number>
                <el-input-number v-fo v-noFocu v-else-if="scope.config.templateType=='InputNumber_Num'"
                  v-model="scope.row[scope.config.prop]" controls-position="right" :min="0" :precision="0" @blur="inputBlur(scope.row,scope.config.prop)"></el-input-number>  
                <el-input
                  v-fo 
                  v-else-if="scope.config.templateType=='Input'"
                  @blur="inputBlur(scope.row,scope.config.prop)"
                  v-model="scope.row[scope.config.prop]"
                ></el-input>
                <span v-else>{{ scope.row[scope.config.prop] }}</span>
              </span>
              <span v-else>{{ scope.row[scope.config.prop] }}</span>
            </template>
          </MyTable>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        >
        <el-button  @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    // 接收绑定参数
    midHight: [Number,String],
  },
  data() {
    return {
      Visible: false,
      package_sn:'',
      data:{
        gross_weight:"",
        volume:"",
        length:"",
        width:"",
        height:"",
      },
       tableColumn_goods: [
        {
          label: "",
          prop: "table_code",
          width:40,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Product_Name'),
          prop: "goods_name",
          width: 120,
          templateType:'Input',
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.commodity_value'),
          prop: "goods_price",
          width: 120,
          templateType:'InputNumber',
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Quantity_goods'),
          prop: "goods_num",
          width: 120,
          templateType:'InputNumber_Num',
        },
        
      ],
      tableData_goods: [],
      sendDataObj_goods:{},
      tabClickIndex:null,
      tabClickLabel:null,
      confirmTrue:true,//确定按钮保护
    };
  },
  created() {
    
  },
  mounted() {
  },
  deactivated(){
    
  },
  watch: {
  },
  methods: {
   
    init(data) {
      this.order_sn=data.order_sn
      this.package_sn=data.package_sn
      this.Visible = true;
      this.getGoodsData()
    },
    getGoodsData(){
      this.$get("orderGoods", { order_sn: this.order_sn,lid: this.lid}).then((res) => {
        this.tableData_goods = res.data;
      });
    },
    addItem(name){
      let obj={
        id:this.tableData_goods.length+1,
        goods_name:'',
        goods_price:'',
        goods_num:'',
      }
      this.tableData_goods.push(obj)
      this.tableData_goods.forEach((item,k)=>{
        item.table_code=k+1
      })
    },
    delItem(name){
      this.tableData_goods=this.tableData_goods.filter(item=>{return item.id!=this.sendDataObj_goods.id})
      this.tableColumn_goods.forEach((item,k)=>{
        item.table_code=k+1
      })
    },
    setCurrent_goods (data){
      this.sendDataObj_goods=data
    },
    setTabClick({index,label}){
      this.tabClickIndex=index
      this.tabClickLabel=label
    },
    // 失去焦点初始化
    inputBlur (row,prop) {
      this.tabClickIndex = null
      this.tabClickLabel = null   
    },
    // 提交修改
    confirm() {
      if (this.confirmTrue) {
        this.confirmTrue=false
        window.setTimeout(()=>{
          this.confirmTrue=true
        },1000)
        let params = new FormData();
        params.append("package_sn", this.package_sn);
        params.append("gross_weight", this.data.gross_weight);
        params.append("volume", this.data.volume);
        params.append("length", this.data.length);
        params.append("width", this.data.width);
        params.append("height", this.data.height);
        params.append("goods", JSON.stringify(this.tableData_goods));
        this.$postForm("uploadPackageData", params).then((res) => {
          this.confirmTrue=true
          if(res.success){
            this.$message.success(res.msg);
            this.$emit("success");
            this.cancel()
          }
        });
      }
    },
    //取消修改
    cancel() {
      this.data={
        gross_weight:"",
        volume:"",
        length:"",
        width:"",
        height:"",
      } 
      this.Visible = false;
    },
    handleChange (name) {
      if(name=='length'||name=='width'||name=='height'){
        if(this.data.length>0&&this.data.width>0&&this.data.height>0){
          this.data.volume=this.$computing(Number(this.data.length)*Number(this.data.width)*Number(this.data.height)/1000000,'fixed',5)
        }else{
          this.data.volume_value=0
        }
        if(this.data.volume<0.00001){
          this.data.volume=0.00001
        }
      }
      if(name=='volume'){
        this.data.length=0
        this.data.width=0
        this.data.height=0
      }
    },
  },
};
</script>

<style scoped lang="less" >
  .midContant {
    border: 0;
    width: 100%;
  }
  .dialogBox .dialogBoxItem .dialogBoxItemRow {
    width: 24%;
  }
</style>